<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="renderer" content="webkit">
    <title>登录</title>
    <link rel="stylesheet" th:href="@{/backstage/css/pintuer.css}">
    <link rel="stylesheet" th:href="@{/backstage/css/admin.css}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
    <script th:src="@{/backstage/js/jquery.js}"></script>
    <script th:src="@{/backstage/js/pintuer.js}"></script>
    <script>
        $(function () {
            // 默认聚焦账号文本框
            $("#name").focus();

            // 点击验证码实现刷新
            $("#captcha-img").click(function () {
                $("#captcha-img").attr("src", "/captcha?" + Math.random());
            });

            // 给"登录"按钮添加单击事件
            $("#login-btn").click(function () {
                login();
            });

            //给整个浏览器窗口添加键盘按下事件
            $(window).keydown(function (e) {
                //如果按的是回车键，则提交登录请求
                if (e.keyCode == 13) {
                    login();
                }
            });

            // 登录
            function login() {
                // 收集参数
                let name = $("#name").val().trim();
                let password = $("#password").val().trim();
                let captcha = $("#captcha").val().trim();
                //表单验证
                if (name == "") {
                    $("#name").focus();
                    alert("用户名不能为空");
                    return;
                }
                if (password == "") {
                    $("#password").focus();
                    alert("密码不能为空");
                    return;
                }
                if (captcha == "") {
                    $("#captcha").focus();
                    alert("验证码不能为空");
                    return;
                }
                //显示正在验证
                $("#msg").text("正在努力验证....");
                //发送请求
                $.post(
                    "/backstage/login",
                    {
                        name: name,
                        password: password,
                        captcha: captcha
                    },
                    function (data) {
                        if (data.code == "1") {
                            //跳转到业务主页面
                            window.location.href = "/backstage/index";
                        } else {
                            //提示信息
                            $("#msg").text(data.message);
                        }
                    });
            }
        });
    </script>
</head>
<body>
<div class="bg" style="background: url('/backstage/images/bg.jpg');"></div>
<div class="container">
    <div class="line bouncein">
        <div class="xs6 xm4 xs3-move xm4-move">
            <div style="height:150px;"></div>
            <div class="media media-y margin-big-bottom">
            </div>
            <form action="index.html" method="post">
                <div class="panel loginbox">
                    <div class="text-center margin-big padding-big-top"><h1>后台管理中心</h1></div>
                    <div class="panel-body" style="padding:30px; padding-bottom:10px; padding-top:10px;">
                        <div class="form-group">
                            <div class="field field-icon-right">
                                <input type="text" id="name" class="input input-big" name="name" placeholder="登录账号"
                                       data-validate="required:请填写账号"/>
                                <i class="icon margin-small bi bi-person-bounding-box"></i>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="field field-icon-right">
                                <input type="password" id="password" class="input input-big" name="password"
                                       placeholder="登录密码"
                                       data-validate="required:请填写密码"/>
                                <i class="icon margin-small bi bi-key-fill"></i>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="field field-icon-right">
                                <br>
                                <input type="text" id="captcha" class="input w50" placeholder="验证码"
                                       style="width: 60%;"/>
                                <img id="captcha-img" th:src="@{/captcha}" width="40%" height="40px"
                                     class="float-right" style="margin-bottom: 2px;">
                            </div>
                        </div>
                        <div class="form-group" id="msg"></div>
                    </div>
                    <div style="padding:30px;">
                        <input type="button" id="login-btn"
                               class="button button-block bg-main text-big input-big" value="登录">
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

</body>
</html>